<template>
    <el-row :gutter="10">
        <el-col :md="6">
            <div class="colContent">
                <div class="panel">
                    <div class="panelContent">
                        <div class="des">系统访问次数</div>
                        <div class="value">3256人次</div>
                        <div class="rate">较上月上升20%</div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :md="6">
            <div class="colContent">
                <div class="panel">
                    <div class="panelContent">
                        <div class="des">在线访客数</div>
                        <div class="value">25人次</div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :md="6">
            <div class="colContent">
                <div class="panel">
                    <div class="panelContent">
                        <div class="des">点击量</div>
                        <div class="value">999+人次</div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :md="6">
            <div class="colContent">
                <div class="panel">
                    <div class="panelContent">
                        <div class="des">新用户</div>
                        <div class="value">55人次</div>
                        <div class="rate">较上月上升20%</div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="10">
        <el-col :md="12">
            <div class="colContent">
                <div class="contentDiv">
                    <div class="usefun" v-loading="loading" element-loading-text="数据加载中...">
                        <div class="title">
                            可用流程
                        </div>
                        <div class="funBox">
                            <div class="fun" v-for="item in wfData" :key="item.id" @click="initiate(item.id)">
                                <div class="icon" :style="{ backgroundColor: item.color }">
                                    <el-icon size="18" color="#fff">
                                        <Star />
                                    </el-icon>
                                </div>
                                <div class="des">{{ item.definitionNm }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :md="12">
            <div class="colContent">
                <div class="contentDiv">
                    <v-chart class="chart" :option="lineOption" />
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="10">
        <el-col :md="12">
            <div class="colContent">
                <div class="contentDiv">
                    <v-chart class="chart" :option="barOption" />
                </div>
            </div>
        </el-col>
        <el-col :md="12">
            <div class="colContent">
                <div class="contentDiv">
                    <v-chart class="chart" :option="pieOption"></v-chart>
                </div>
            </div>
        </el-col>
    </el-row>
    <workflowFillData ref="fill"></workflowFillData>
</template>
<script setup>
import "echarts";
import VChart from "vue-echarts";
import { ref, onMounted } from "vue";
import api from "@/api"
import { ElMessage } from 'element-plus'
import workflowFillData from "@/view/workflow/common/workflowFillData.vue";


const lineOption = ref({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['访问数', '在线数', '点击量', '新增数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周七']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '访问数',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
            itemStyle: {
                color: '#D3B8FC',
                lineStyle: {
                    color: '#D3B8FC'
                }
            }
        },
        {
            name: '在线数',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310],
            itemStyle: {
                color: '#FFCBA4',
                lineStyle: {
                    color: '#FFCBA4'
                }
            }
        },
        {
            name: '点击量',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410],
            itemStyle: {
                color: '#A6E3D7',
                lineStyle: {
                    color: '#A6E3D7'
                }
            }
        },
        {
            name: '新增数',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320],
            itemStyle: {
                color: '#FFE1F2',
                lineStyle: {
                    color: '#FFE1F2'
                }
            }
        }
    ]
});
const barOption = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周七'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '访问数',
            type: 'bar',
            barWidth: '15%',
            data: [321, 280, 250, 240, 231, 340, 310],
            itemStyle: {
                color: '#D3B8FC'
            }
        },
        {
            name: '在线数',
            type: 'bar',
            barWidth: '15%',
            data: [210, 152, 200, 334, 390, 330, 220],
            itemStyle: {
                color: '#FFCBA4'
            }
        },
        {
            name: '点击量',
            type: 'bar',
            barWidth: '15%',
            data: [20, 62, 120, 434, 490, 230, 120],
            itemStyle: {
                color: '#A6E3D7'
            }
        },
        {
            name: '新增数',
            type: 'bar',
            barWidth: '15%',
            data: [10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
                color: '#FFE1F2'
            }
        }
    ]
})
const pieOption = ref({
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    color: ['#D3B8FC', '#FFCBA4', '#A6E3D7', '#FFE1F2'],
    series: [
        {
            name: '系统参数',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 1048, name: '访问数' },
                { value: 735, name: '在线数' },
                { value: 580, name: '点击量' },
                { value: 484, name: '新增数' },
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
})
const wfData = ref([])
const loading = ref(false)
const fill = ref()
//获取流程数据
const getWfData = async () => {
    const color = ['#E99D42', '#81B337', '#DE868F', '#BFBF3D', '#409EFF', '#7F83F7', '#54BCBD']
    loading.value = true
    const res = await api.get('/workflow/definition/pageList', { pageNum: 1, pageSize: 999, status: '0', enableFlag: '0' })
    if (res.data.code === 200) {
        wfData.value = res.data.data.records
        wfData.value.forEach(item => {
            item.color = color[Math.floor(Math.random() * color.length)]
        })
    } else {
        ElMessage.error(res.data.msg)
    }
    loading.value = false
}
//发起流程
const initiate = (id) => {
    fill.value.init(id, null)
}
onMounted(() => {
    getWfData()
})
</script>
<style lang="less" scoped>
.colContent {
    margin-bottom: 10px;

    .panel {
        padding: 10px;
        height: 10vh;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        background-color: #fff;
        gap: 3%;

        .panelContent {
            width: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1vh;

            .des {
                font-size: 12px;
                font-weight: 500;
                color: #606266;
            }

            .value {
                font-size: 20px;
                font-weight: 700;
            }

            .rate {
                font-size: 10px;
                color: #FF4081;
            }

        }
    }

    .contentDiv {
        height: 40vh;
        background-color: #fff;
        border-radius: 5px;

        .usefun {
            padding: 20px;

            .title {
                font-weight: 600;
                margin-bottom: 20px;
            }

            .funBox {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                max-height: calc(40vh - 70px);
                overflow: auto;


                .fun {
                    height: 70px;
                    width: 70px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-wrap: wrap;
                    gap: 10px;
                    cursor: pointer;

                    .icon {
                        width: 45px;
                        height: 45px;
                        border-radius: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .des {
                        font-size: 12px;
                    }
                }
            }

            .funBox::-webkit-scrollbar {
                display: none;
            }
        }
    }
}
</style>